<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <title></title>

    <style type="text/css">
        * { margin: 0; padding: 0; list-style: none; }
        body{ text-align: center; padding: 60px; font-family: -apple-system, BlinkMacSystemFont; }
        h1{ margin: 2em 0; font-size: 3em; }

        .apple-pay-button {
            display: inline-block;
            padding: 2em;
            width: 200px;
            cursor: pointer;
            -webkit-appearance: -apple-pay-button;
        }
        .apple-pay-button-black {
            -apple-pay-button-style: black;
        }
        .apple-pay-button-white {
            -apple-pay-button-style: white;
        }

        .apple-pay-button-white-with-line {
            -apple-pay-button-style: white-outline;
        }

        .hidden{ display: none; }
    </style>
</head>

<body>
<h1>Apple Pay Example</h1>
<button class="apple-pay-button js-apple-pay-button hidden"></button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
    var PaymentRequest =
        {
            "countryCode": "US",
            "currencyCode": "USD",
            "merchantCapabilities": [
                "supports3DS"
            ],
            "supportedNetworks": [
                "visa",
                "masterCard",
                "amex",
                "discover"
            ],
            "total": {
                "label": "Demo (Card is not charged)",
                "type": "final",
                "amount": "1.99"
            }
        }
    ;
    console.log('window.navigator.userAgent', window.navigator.userAgent);
    console.log('window.ApplePaySession', window.ApplePaySession);


    // does this browser support Apple Pay
    if ( window.ApplePaySession !== undefined) {
        // use the merchant provided by Apple in your developer account
        var promise = ApplePaySession.canMakePaymentsWithActiveCard('merchant.sandbox.wondershare.cloudservice');

        // verify that Apple Pay is accepted
        promise.then(function(canMakePayments){
            if ( canMakePayments ) {
                $('.js-apple-pay-button').removeClass('hidden');
            } else {
                console.log('Apple Pay is not supported.');
            }
        });

        $('.js-apple-pay-button').on('click', function(e){
            // preventing form submission
            e.preventDefault();

            // create Apple Pay session
            var PaymentSession = new ApplePaySession(2, PaymentRequest);

            // merchant validation
            // ApplePay documentation: https://developer.apple.com/documentation/applepayjs/providing_merchant_validation
            // Example PHP file: https://github.com/norfolkmustard/ApplePayJS/blob/master/apple_pay_comm.php
            PaymentSession.onvalidatemerchant = function(event){
                console.log('onvalidatemerchant');
                console.log('onvalidatemerchant validationURL', event.validationURL);
                var promise = new Promise(function(resolve, reject){
                    // AJAX call to backend to validate merchant goes here
                    // response should be JSON-encoded
                    $.ajax({
                        url : 'https://applepay.wondershare.cc/ApplePayJS/apple_pay_comm.php?u=' + event.validationURL,
                        success : function(response){
//                            console.log('apple_pay_comm.php response', response);
//                            console.log('apple_pay_comm.php response', JSON.stringify(response));
                            try {
                                resolve(JSON.parse(response));
                            } catch (e) {
                                console.error(e);
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.error("Status: " + textStatus);
                            console.error("Error: " + errorThrown);
                        }
                    });
                });

                // once the merchant is validated, the payment sheet is displayed
                promise.then(function(merchantSession){
                    console.log('onvalidatemerchant merchantSession', merchantSession);
                    PaymentSession.completeMerchantValidation(merchantSession);
                });
            };

            // payment method selection
            PaymentSession.onpaymentmethodselected = function(event){
                PaymentSession.completePaymentMethodSelection({ type: 'final', label: 'Total', amount: 10.00 }, [{ type: 'final', label: 'Subtotal', amount: 10.00 }]);
            };

            // payment method authorization
            // once payment is authorized, it will return an object that contains the payment token for your processor
            PaymentSession.onpaymentauthorized = function(event){
                console.log(event);
                const payment = event.payment;
                const token = payment.token;
                console.log('token', token);
                // add some logic here to work with your payment processor

                // complete payment session
                PaymentSession.completePayment(ApplePaySession.STATUS_SUCCESS);
            };

            PaymentSession.oncancel = function(event) {
                console.log(event);
                console.log('oncancel');
            };

            // gentlemen, start your engines
            PaymentSession.begin();
        });
    } else {
        console.log('Apple Pay is not supported.');
    }
</script>

</body>
</html>